@page "/Stacked_Bar_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Bar Config="config1" OnFirstRender="OnFirstRender"/>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <Bar @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    private async void OnFirstRender(IChartComponent chart1)
    {
        var data1 = await DemoData.StackColumnDataAsync(NavigationManager, HttpClient);
        await chart1.ChangeData(data1.Reverse());
    }

    #region 示例1

    BarConfig config1 = new BarConfig()
    {
        IsStack = true,
        XField = "value",
        YField = "year",
        SeriesField = "type",
        Label = new BarViewConfigLabel()
        {
            Position = "middle",
            Layout = new[]
            {
                new LayoutType()
                {
                    Type = "interval-adjust-position"
                },
                new LayoutType()
                {
                    Type = "interval-hide-overlap"
                },
                new LayoutType()
                {
                    Type = "adjust-color"
                },
            }
        },
    };

    #endregion 示例1


    #region 示例2

    object[] data2 = new object[] {
        new  {
    地区= "华东",
    细分= "公司",
    销售额= 1454715.807999998,
  },
        new  {
    地区= "华东",
    细分= "消费者",
    销售额= 2287358.261999998,
  },
        new  {
    地区= "华东",
    细分= "小型企业",
    销售额= 942432.3720000006,
  },
        new  {
    地区= "中南",
    细分= "公司",
    销售额= 1335665.3239999984,
  },
        new  {
    地区= "中南",
    细分= "消费者",
    销售额= 2057936.7620000008,
  },
        new  {
    地区= "中南",
    细分= "小型企业",
    销售额= 743813.0069999992,
  },
        new  {
    地区= "东北",
    细分= "公司",
    销售额= 834842.827,
  },
        new  {
    地区= "东北",
    细分= "消费者",
    销售额= 1323985.6069999991,
  },
        new  {
    地区= "东北",
    细分= "小型企业",
    销售额= 522739.0349999995,
  },
        new  {
    地区= "华北",
    细分= "公司",
    销售额= 804769.4689999995,
  },
        new  {
    地区= "华北",
    细分= "消费者",
    销售额= 1220430.5610000012,
  },
        new  {
    地区= "华北",
    细分= "小型企业",
    销售额= 422100.9870000001,
  },
        new  {
    地区= "西南",
    细分= "公司",
    销售额= 469341.684,
  },
        new  {
    地区= "西南",
    细分= "消费者",
    销售额= 677302.8919999995,
  },
        new  {
    地区= "西南",
    细分= "小型企业",
    销售额= 156479.9319999999,
  },
        new  {
    地区= "西北",
    细分= "公司",
    销售额= 253458.1840000001,
  },
        new  {
    地区= "西北",
    细分= "消费者",
    销售额= 458058.1039999998,
  },
        new  {
    地区= "西北",
    细分= "小型企业",
    销售额= 103523.308,
  },
};

    BarConfig config2 = new BarConfig()
    {
        YField = "地区",
        XField = "销售额",
        SeriesField = "细分",
        Label = new BarViewConfigLabel()
        {
            Offset = 0,
            Visible = true,
            Position = "middle",
        },
    };

    #endregion 示例2



}
